<!-- 车辆途径线路统计表 -->
<!DOCTYPE>
<html>

<head>
    <%- include ../taglib/layout-table.ejs %>


</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>设备数据</h5>
                </div>
                <div class="ibox-content  pre-scrollable">
                    <div id='external-events'>
                        <ul id="kindTree" class="ztree">
                        </ul>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-sm-9">
            <div class="ibox float-e-margins ">
                <div class="ibox-title">
                    <h5>查询条件</h5>

                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="pull-right">
                            <form role="form" class="form-inline ">

                                <div class="form-group">
                                    <label class="control-label">时间范围：</label>
                                </div>
                                <div class="form-group">
                                    <input placeholder="开始时间" class="laydate-icon form-control layer-date" id="start">
                                </div>
                                <div class="form-group">
                                    <input placeholder="结束时间" class="laydate-icon form-control layer-date" id="end">
                                </div>
                                <div class="input-group div-serch-input">
                                    <input type="text" placeholder="请录入名称查询" class="input form-control" id="serchStr">
                                    <span class="input-group-btn">
                                        <button type="button" class="btn btn btn-primary" onclick="query()"><i
                                                    class="fa fa-search"></i> 搜索
                                        </button>
                                    </span>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>数据列表</h5>

                    <div class="ibox-tools">
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="" id="">

                        <div>
                            <table id="example"
                                   class="table table-striped table-bordered table-hover dataTables-example">
                                <thead>
                                <tr>
                                    <th>
                                    </th>
                                    <th width="200px">id</th>
                                    <th width="200px">车牌号</th>
                                    <th width="200px">线路名称</th>
                                    <th width="200px">抵达时间</th>
                                    <th width="200px">经度</th>
                                    <th width="200px">纬度</th>
                                    <th width="200px">驾驶员</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--<div class="row">-->
        <!--<div class="col-sm-12">-->
           <!---->
        <!--</div>-->

    <!--</div>-->
</div>

<%- include ../taglib/layout-content.ejs %>

<script src="js/combox/comb-color-data.js"></script>

<script type="text/javascript">
    var table;
    var validator;
    $(document).ready(function () {
        table = $('.dataTables-example').dataTable({
            "lengthChange": false,//是否允许用户自定义显示数量
//            "searching": false,//本地搜索
//            "scrollY": "220px",//dt高度
//            "autoWidth": true,//自动宽度
            "dom": '<"top"<"clear">>rt<"bottom"ilp<"clear">>',
//            "lengthChange": false,//是否允许用户自定义显示数量
            "ajax": {
                "url": "/busPassLine/list",
                "dataSrc": "rows"
            },
            serverSide: true,
            columns: [
                {
                    "sClass": "text-center",
                    "data": "id",
                    'checkboxes': {
                        'selectRow': true,
                    }
                },
                {"sClass": "text-center", data: 'id'},
                {"sClass": "text-center", data: 'basecarno', "bSortable": false, "orderable": false},
                {"sClass": "text-center", data: 'linename', "bSortable": false, "orderable": false},
                {"sClass": "text-center", data: 'arrivetime', "bSortable": false, "orderable": false},
                {"sClass": "text-center", data: 'jd', "bSortable": false, "orderable": false},
                {"sClass": "text-center", data: 'wd', "bSortable": false, "orderable": false},
                {"sClass": "text-center", data: 'drivername', "bSortable": false, "orderable": false},

            ],
            //排序
            'order': [[1, 'desc']],
            initComplete: function (setting, json) {
                //隐藏列
                visiblecolumn(1, false)
            },
        });



        //日期范围限制
        var start = {
            elem: '#start',
            format: 'YYYY-MM-DD hh:mm:ss',

            max: '2999-06-16 23:59:59', //最大日期
//            start: laydate.now(),
//            start: laydate.now() + ' 00:00:00',
            istime: true,
            istoday: false,
            festival: true, //是否显示节日
            choose: function (datas) {
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas //将结束日的初始值设定为开始日
            }
//            min: laydate.now(-1), //-1代表昨天，-2代表前天，以此类推
//            max: laydate.now(+1) //+1代表明天，+2代表后天，以此类推
        };
        var end = {
            elem: '#end',
            format: 'YYYY-MM-DD hh:mm:ss',
//            min: laydate.now(),
            max: '2999-06-16 23:59:59',
//            start: laydate.now() + ' 23:59:59',
            istime: true,
            istoday: false,
            festival: true, //是否显示节日
            choose: function (datas) {
                start.max = datas; //结束日选好后，重置开始日的最大日期
            }
        };
        laydate(start);
        laydate(end);
        $("#start").val(laydate.now() + ' 00:00:00');
        $("#end").val(laydate.now() + ' 23:59:59');
//        下拉列表
        $("#myModal").on("shown.bs.modal", function () {
////            静态数据或者从后台获取动态数据 此处为comb的id和数据数据ajax获取
            //loadComb("baseCarNoColour",combColor);

        })

    });
    //数字框
    (function ($) {
        $('.spinner .btn:first-of-type').on('click', function () {
            var num = parseInt($('.spinner input').val(), 10);
            if (num < 9) {
                $('.spinner input').val(parseInt($('.spinner input').val(), 10) + 1);
            }

        });
        $('.spinner .btn:last-of-type').on('click', function () {
            var num = parseInt($('.spinner input').val(), 10);
//            if(!num){
//                num=0;
//            }
            if (num > 1) {
                $('.spinner input').val(parseInt($('.spinner input').val(), 10) - 1);
            }


        });
    })(jQuery);

    function query() {
        var start = $("#start").val();
        var end = $("#end").val();
        var code = $("#serchStr").val();
        var carId;
        var carIds=$("#h_all_car_id").val();
        if (carIds) {
            carId = carIds;
        } else {
            carId = "";

        }
        var jsonstr = [{"start": start},{"carId": carId}, {"end": end}, {"code": code}];
        table.DataTable().search(JSON.stringify(jsonstr), false, false).draw();
    }


    //隐藏和显示列 c:列0开始，visible=false隐藏
    function visiblecolumn(c, visible) {
        table.DataTable().column(c).visible(visible)
    }
    function loadComb(id, data) {
        $("#" + id).select2({
            data: data,
            theme: "bootstrap",
            placeholder: '请选择',
            allowClear: true
        });
    }
    //    部门车辆树
    $(function () {
        urlTree = '/tree/deptCar';
        init_tree('id', 'parentId', 'name', fnClick, fnCheck, "checkbox");
        loadMyTree(urlTree);

    });

    //    树节点选中
    var fnClick = function (event, treeId, treeNode) {
        var flag=treeNode.checked;
        tree_Obj.checkNode(treeNode, true, true);
        selectTreeNode(treeNode);


    }
    var fnCheck = function (event, treeId, treeNode, clickFlag) {
        var ids=selectTreeNode(treeNode);

    }

    function selectTreeNode(treeNode) {
        var ids = setAllCarIds();
        query();
        return ids;
    }
    function setAllCarIds() {
        var checkNodes = tree_Obj.getCheckedNodes(true);
        var ids = "";
        $.each(checkNodes, function (key, value) {
            var flag = value.isCar
            if (flag) {
                ids = ids + value.id + ","
                carno=value.name;
            }
        });
        $("#h_all_car_id").val(ids);
        return ids;
    }
</script>

<input type="hidden" id="h_all_car_id" name="carIds">


</body>

</html>
